<div data-extend-template="components/views/bst-modal.html">
  <h4 data-block="modal-header">Host Collection Membership Management</h4>

  <div data-block="modal-body">
    <div class="row">
      <div class="col-sm-12">
        <div bst-global-notification></div>
      </div>
    </div>

    <div bst-alert="info" ng-show="hostCollections.action == 'add'">
      <span translate>
        Are you sure you want to add the {{ table.numSelected }} content host(s) selected to the host collection(s) chosen?
      </span>
      <div>
        <button type="button" class="btn btn-default" ng-click="performHostCollectionAction()" translate>Yes</button>
        <button type="button" class="btn btn-default" ng-click="hostCollections.action = null; hostCollections.working = false" translate>No</button>
      </div>
    </div>

    <div bst-alert="info" ng-show="hostCollections.action == 'remove'">
      <span translate>
        Are you sure you want to remove the {{ table.numSelected }} content host(s) selected from the host collection(s) chosen?
      </span>
      <div>
        <button type="button" class="btn btn-default" ng-click="performHostCollectionAction()" translate>Yes</button>
        <button type="button" class="btn btn-default" ng-click="hostCollections.action = null; hostCollections.working = false" translate>No</button>
      </div>
    </div>

    <div data-extend-template="layouts/partials/table.html">
      <div data-block="list-actions">
        <button class="btn btn-default" type="button"
                ng-hide="denied('edit_hosts')"
                ng-disabled="table.numSelected == 0"
                ng-click="hostCollections.action = 'add'; hostCollections.working = true">
          <span translate>Add To</span>
        </button>

        <button class="btn btn-default" type="button"
                ng-hide="denied('edit_hosts')"
                ng-disabled="table.numSelected == 0"
                ng-click="hostCollections.action = 'remove'; hostCollections.working = true">
          <span translate>Remove From</span>
        </button>
      </div>

      <span data-block="no-rows-message" translate>
        There are no Host Collections available. You can create new Host Collections after selecting 'Host Collections' under 'Hosts' in main menu.
      </span>

      <span data-block="no-search-results-message" translate>
        Your search returned zero Host Collections.
      </span>

      <div data-block="table">
        <table class="table table-striped table-bordered" ng-class="{'table-mask': state.working}">
          <thead>
            <tr bst-table-head row-select>
              <th bst-table-column="name"><span translate>Name</span></th>
              <th bst-table-column="content_hosts"><span translate>Content Hosts</span></th>
              <th bst-table-column="limit"><span translate>Limit</span></th>
            </tr>
          </thead>

          <tbody>
            <tr bst-table-row ng-repeat="hostCollection in table.rows" row-select="hostCollection">
              <td bst-table-cell>
                <a ng-click="ok(); " ui-sref="host-collection.info({hostCollectionId: hostCollection.id})" >
                  {{ hostCollection.name }}
                </a>
              </td>
              <td bst-table-cell>
                <a ng-click="ok();"  ui-sref="host-collection.hosts.list({hostCollectionId: hostCollection.id})">
                  {{ hostCollection.total_hosts }}
                </a>
              </td>
              <td bst-table-cell>{{ hostCollection.max_hosts | unlimitedFilter:hostCollection.unlimited_hosts }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div data-block="modal-footer">
    <button type="button" class="btn btn-primary" ng-click="ok()" translate>
      Done
    </button>
  </div>
</div>